<script lang="ts" setup>
import { reactive, ref, computed } from "vue";
import { ElMessage, ElLoading } from "element-plus";

import { useRouter, useRoute } from "vue-router";
import { LoginForm, User ,R} from "@api/model";
import { login } from "@api/user";
import { useStore } from "vuex";
import { captchaUrl ,fileServiceUrl} from "@config";
import { error, log } from "console";


// 查询表单的响应式数据,设置初始值
const loginForm = reactive<LoginForm>({
  // 姓名
  username: "",
  // 头衔
  password: "",
  // 验证码
  checkCode: "",
  // 记住我
  autoLogin: false,
});
// 验证码的接口地址
const yzmUrl = ref(captchaUrl);
//获取路由对象
const router = useRouter();
//获取状态管理对象
const store = useStore();
function userLogin() {
  let loading = ElLoading.service({
    text: "登录中···",
    target: document.querySelector("#loginLoading"),
  });
  login(loginForm)
    .then((result: R<User>) => {
      console.log(result.data);
      //关闭加载
      loading.close();
      if (result.code === 20000) {
        ElMessage.success(result.message);
        console.log("登录成功，token: " + result.data.token);
        localStorage.setItem("token", result.data.token);
        let user = result.data;
        user.salt = headUrl(user.salt);
        //保存登录用户信息
        store.commit("setUser", user);
        // 编码方式跳转页面，这里跳转到主页
        router.push("/index");
      } else {
        // 弹窗提醒登录异常信息
        ElMessage.error(result.message);
      }
      // 刷新验证码图片
      changeImg();
    })
    .catch((error) => {
      console.log(error);
    });
}
function headUrl(avatar: string) {
  console.log("找头像");

  if (avatar.startsWith("http")) {
    return avatar;
  } else {
    if (avatar == null || avatar === "") {
      //ElMessage.warning(teacherForm().teacherForm.value.name + "头像信息加载失败！")
      return fileServiceUrl + avatar + "null.null";
    }
    return fileServiceUrl + avatar;
  }
  //return "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png";
}
/**
 * 获取验证码
 */
function changeImg() {
  yzmUrl.value = captchaUrl + Math.random();
}
</script>

<template>
  <div class="contentBox">
    <div class="login_box">
      <div class="login_l_img">
        <img src="@assets/images/login-img.png" />
      </div>
      <div class="login">
        <div class="login_logo">
          <a href="#"><img src="@assets/images/login_logo.png" /></a>
        </div>
        <div class="login_name">
          <p>睿峰后台管理系统</p>
        </div>
        <form id="loginLoading">
          <input
            type="text"
            v-model="loginForm.username"
            required
            placeholder="用户名"
          />
          <input
            type="password"
            v-model="loginForm.password"
            required
            placeholder="密码"
          />
          <div class="checkcode">
            <input
              type="text"
              v-model="loginForm.checkCode"
              required
              placeholder="验证码"
            />
            <img :src="yzmUrl" @click="changeImg" />
          </div>
          <input type="checkbox" v-model="loginForm.autoLogin" />
          <label>自动登录</label>
          <input
            value="登 录"
            @click="userLogin"
            style="width: 100%"
            type="button"
          />
        </form>
        <div id="info" text="${errInfo==null ?session.errInfo:errInfo}"></div>
      </div>
      <div class="copyright">科技有限公司 版权所有©20219-2030</div>
    </div>
  </div>
</template>

<style scoped>
.contentBox {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #93defe;
}
a {
  color: #27a9e3;
  text-decoration: none;
  cursor: pointer;
}

img {
  border: none;
}

.login_box {
  width: 1100px;
  margin: 120px auto 0;
}

.login_box .login_l_img {
  float: left;
  width: 432px;
  height: 440px;
  margin-left: 50px;
}

.login_box .login_l_img img {
  width: 500px;
  height: 440px;
}

.login {
  /* height: 360px; */
  width: 400px;
  padding: 50px;
  padding-bottom: 5px;
  background-color: #ffffff;
  border-radius: 6px;
  box-sizing: border-box;
  float: right;
  margin-right: 50px;
  position: relative;
  margin-top: 50px;
  top: -20px;
}

.login_logo {
  width: 120px;
  height: 120px;
  border: 5px solid #93defe;
  border-radius: 100px;
  background: #fff;
  text-align: center;
  line-height: 110px;
  position: absolute;
  top: -60px;
  right: 140px;
}

.login_name {
  width: 100%;
  float: left;
  text-align: center;
  margin-top: 20px;
}

.login_name p {
  width: 100%;
  text-align: center;
  font-size: 18px;
  color: #444;
  padding: 10px 0 20px;
}

.login_logo img {
  width: 60px;
  height: 60px;
  display: inline-block;
  vertical-align: middle;
}

input[type="text"],
input[type="file"],
input[type="password"],
input[type="email"],
select {
  border: 1px solid #dcdee0;
  vertical-align: middle;
  border-radius: 3px;
  height: 40px;
  padding: 0px 16px;
  font-size: 14px;
  color: #555555;
  outline: none;
  width: 100%;
  margin-bottom: 15px;
  line-height: 50px;
  color: #888;
}

input[type="text"]:focus,
input[type="file"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select:focus {
  border: 1px solid #27a9e3;
}

input[type="submit"],
input[type="button"] {
  display: inline-block;
  vertical-align: middle;
  padding: 12px 24px;
  margin: 0px;
  margin-top: 10px;
  font-size: 16px;
  line-height: 18px;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  color: #ffffff;
  background-color: #27a9e3;
  border-radius: 3px;
  border: none;
  -webkit-appearance: none;
  outline: none;
  width: 100%;
}

.copyright {
  font-size: 14px;
  color: #fff;
  display: block;
  width: 100%;
  float: left;
  text-align: center;
  margin-top: 60px;
}

#info {
  margin-top: 10px;
  height: 30px;
  background-color: rgb(250, 250, 250);
  border-radius: 5px;
  color: mediumvioletred;
  text-align: center;
  font-size: 16px;
  font-weight: 100;
}

.checkcode input {
  width: 125px;
}
.checkcode img {
  margin-left: 20px;
}

.login input[type="checkbox"] {
  height: 15px;
  width: 15px;
  vertical-align: middle;
}

.login label {
  color: gray;
  margin-left: 10px;
}
</style>